<template>
  <!-- <CustomNav title="我的" :isShowBack="false"></CustomNav> -->
  <view class="container">
    <view class="content">
      <!-- 用户 -->
      <view class="user">
        <view class="left" v-if="avatarUrl">
          <u-image
            :src="avatarUrl"
            mode="aspectFill"
            width="150rpx"
            height="150rpx"
            shape="circle"
            :lazy-load="true"
          >
            <template v-slot:loading>
              <u-loading-icon color="#969696"></u-loading-icon>
            </template>
          </u-image>
        </view>
        <view class="left" v-else>
          <u-image
            src="./../../static/default_avatar.png"
            mode="aspectFill"
            width="150rpx"
            height="150rpx"
            shape="circle"
            :lazy-load="true"
          >
            <template v-slot:loading>
              <u-loading-icon color="#969696"></u-loading-icon>
            </template>
          </u-image>
        </view>

        <view class="right" v-if="username">
          <view class="h1">{{ username }}</view>
        </view>
        <view class="right" v-else>
          <view class="h1" @click="handleLogin">登录/注册</view>
          <view class="span">Hi，欢迎加入体验更多功能</view>
        </view>
      </view>
      <!-- user数据 -->

      <view class="user-data">
        <view class="row love" @click="jumpPage('/pagesC/myFavorite/index')">
          <view class="top">{{ likeNumber || 0 }}</view>
          <view class="bottom">我的喜欢</view>
        </view>
        <view
          class="row collect"
          @click="jumpPage('/pagesC/myCollection/index')"
        >
          <view class="top">{{ collectNumber || 0 }}</view>
          <view class="bottom">我的收藏</view>
        </view>
        <view
          class="row look-history"
          @click="jumpPage('/pagesC/watchHistory/index')"
        >
          <view class="top">{{ historyNumber || 0 }}</view>
          <view class="bottom">观看历史</view>
        </view>
      </view>

      <!-- <view class="data-echarts">
        &#128514;&#128525;&#128526;&#128527;
        <l-echart
          ref="chart"
          @finished="init"
          custom-style="width:400rpx;height:300rpx;"
        ></l-echart>
      </view> -->

      <!-- <view class="data-echarts"> &#128514;&#128525;&#128526;&#128527; </view> -->
      <view class="data-echarts">
        <div class="loader"></div>
      </view>

      <view class="option" @click="handlePersonalCenter">
        <view class="icon">
          <i class="iconfont icon-s icon-zhengjian"></i>
          <view class="title">个人中心</view>
        </view>
        <view class="arrow"
          ><i
            class="iconfont icon-arrow-right"
            style="font-size: 26rpx; color: #cacaca"
          ></i
        ></view>
      </view>

      <view class="option-container">
        <view
          class="option-row"
          v-for="(item, index) in userStore.navOptionList"
          :key="index"
          @click="handleGoJump(item)"
        >
          <button
            class="btn"
            open-type="share"
            v-if="item.title == '把Applet推荐给好友'"
          ></button>
          <button
            class="btn"
            open-type="contact"
            @contact="handleContact"
            v-if="item.title == '联系官方'"
          ></button>
          <button
            class="btn"
            open-type="feedback"
            v-if="item.title == '意见反馈'"
          ></button>
          <view class="icon">
            <i class="iconfont icon-s" :class="item.icon"></i>
            <view class="title">{{ item.title }}</view>
          </view>
          <view class="arrow">
            <i
              class="iconfont icon-arrow-right"
              style="font-size: 26rpx; color: #cacaca"
            ></i>
          </view>
        </view>
      </view>

      <view class="well-known-saying">{{ encourage() }}</view>
    </view>
  </view>

  <Tabbar :page="page"></Tabbar>
</template>

<script setup>
import CustomNav from "@/components/CustomNav/index.vue";
import Tabbar from "@/components/Tabbar/index";
import useHomeStore from "@/store/modules/home";
import useUserStore from "@/store/modules/user";
import { getItem, setItem } from "@/utils/localStorage";
import { jumpPage, encourage } from "@/utils/tool";
import env from "@/utils/env.js";

// 当前页面page
const page = ref("/pages/user/index");

const userStore = useUserStore();
const homeStore = useHomeStore();
// 格式化导航高度
const navHeight = `${homeStore.navHeight}px`;

// 跳转到登录页面
const handleLogin = () => {
  //在起始页面跳转到login.vue页面并传递参数
  jumpPage("/pagesC/login/index");
};
// 跳转到个人中心页面
const handlePersonalCenter = () => {
  jumpPage("/pagesC/personalCenter/index");
};
// 跳转
const handleGoJump = (item) => {
  console.log("item：", item);
  jumpPage(item.page);
};

// 头像
const avatarUrl = ref("");
// 昵称
const username = ref("");

const likeNumber = ref(0);
const collectNumber = ref(0);
const historyNumber = ref(0);

onShow(() => {
  console.log("你好------------------------------------------------");
  // 头像
  // avatarUrl.value =
  //   env.baseUrl + "/studio/img/head/" + getItem("userInfo").headPath;
  avatarUrl.value = getItem("userInfo").headPath;
  // 昵称
  username.value = getItem("userInfo").username;

  console.log("avatarUrl:", avatarUrl);

  setTimeout(() => {
    console.log("setTimeOut~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
    likeNumber.value = getItem("userInfo").likeNumber;
    collectNumber.value = getItem("userInfo").collectNumber;
    historyNumber.value = getItem("userInfo").historyNumber;
  }, 50);
});
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  width: 750rpx;
  // padding: 0 40rpx;
  background-image: linear-gradient(
    to bottom,
    #82b0ffed,
    #f2f7ff,
    #f2f7ff,
    #f2f7ff,
    #f2f7ff
  );
  padding-top: v-bind(navHeight);

  .content {
    .user {
      display: flex;
      align-items: center;
      padding: 0 40rpx;

      .left {
        border-radius: 100%;
        overflow: hidden;
        width: 160rpx;
        height: 160rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        margin-right: 40rpx;

        // image {
        //   width: 150rpx;
        //   height: 150rpx;
        //   border-radius: 100%;
        // }
      }

      .right {
        .h1 {
          font-size: 40rpx;
          font-weight: 900;
          color: #000;
          margin-bottom: 8rpx;
        }
        .span {
          color: #7384a5;
          font-size: 26rpx;
        }
      }
    }

    .user-data {
      // width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 50rpx 0;

      .row {
        width: 30%;
        height: 20px;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .top {
          font-size: 38rpx;
          color: #000;
          font-weight: 900;
        }

        .bottom {
          font-size: 26rpx;
          color: #969696;
        }
      }

      .row:nth-child(2) {
        border-left: 1px solid #898f96;
        border-right: 1px solid #898f96;
      }
    }

    // .data-echarts {
    //   height: 200rpx;
    //   background-color: #2d6ef1;
    //   border-radius: 20rpx;
    //   margin: 70rpx 40rpx 30rpx;
    //   box-sizing: border-box;
    //   display: flex;
    //   align-items: center;
    //   justify-content: center;
    // }
    .data-echarts {
      height: 200rpx;
      // background-color: #2d6ef1;
      background-color: #2d6ef10f;

      border-radius: 20rpx;
      margin: 70rpx 40rpx 30rpx;
      box-sizing: border-box;
      padding: 0 245rpx;
      // padding-top: 71rpx;

      .loader {
        width: 180rpx;
        height: 180rpx;
        background: #fd135a;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        --c: at 50% 66%, #000 60deg, #0000 0;
        -webkit-mask: conic-gradient(from 30deg var(--c)) right,
          conic-gradient(from 150deg var(--c)) bottom,
          conic-gradient(from -90deg var(--c)) left, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        -webkit-mask-repeat: no-repeat;
        animation: l9 1.5s infinite;
      }
      @keyframes l9 {
        0% {
          -webkit-mask-size: 0 0, 0 0, 0 0, auto;
        }
        13.33% {
          -webkit-mask-size: 100% 100%, 0 0, 0 0, auto;
        }
        26.67% {
          -webkit-mask-size: 100% 100%, 100% 100%, 0 0, auto;
        }
        40%,
        60% {
          -webkit-mask-size: 100% 100%, 100% 100%, 100% 100%, auto;
        }
        73.33% {
          -webkit-mask-size: 0 0, 100% 100%, 100% 100%, auto;
        }
        86.67% {
          -webkit-mask-size: 0 0, 0 0, 100% 100%, auto;
        }
        100% {
          -webkit-mask-size: 0 0, 0 0, 0 0, auto;
        }
      }

      // 蝙蝠
      // .loader {
      //   width: 100px;
      //   height: 45px;
      //   position: relative;
      // }
      // .loader:before,
      // .loader:after {
      //   content: "";
      //   position: absolute;
      //   inset: 0;
      //   background: #000;
      //   box-shadow: 0 0 0 50px;
      //   clip-path: polygon(
      //     -50px -20px,
      //     10% -12px,
      //     20% 0,
      //     calc(50% - 15px) 0,
      //     calc(50% - 10px) -20px,
      //     calc(50% - 8px) -15px,
      //     calc(50% + 8px) -15px,
      //     calc(50% + 10px) -20px,
      //     calc(50% + 15px) 0,
      //     80% 0,
      //     90% -12px,
      //     calc(100% + 50px) -20px,
      //     100% 80%,
      //     calc(100% + 10px) calc(100% + 10px),
      //     60% 100%,
      //     50% calc(100% + 15px),
      //     40% 100%,
      //     -10px calc(100% + 10px),
      //     0 80%
      //   );
      // }
      // .loader:after {
      //   animation: l9 1s infinite;
      //   transform: perspective(300px) translateZ(0px);
      // }
      // @keyframes l9 {
      //   to {
      //     transform: perspective(300px) translateZ(100px);
      //     opacity: 0;
      //   }
      // }

      // .loader {
      //   display: inline-grid;
      //   font-size: 72px;
      // }
      // .loader:before,
      // .loader:after {
      //   content: "💯";
      //   grid-area: 1/1;
      // }
      // .loader:after {
      //   animation: l10 1s infinite;
      // }
      // @keyframes l10 {
      //   to {
      //     transform: scale(1.8);
      //     opacity: 0;
      //   }
      // }
    }

    .option {
      margin: 0 40rpx;
      padding: 0 50rpx;
      height: 85rpx;
      background-color: #fff;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .icon {
        display: flex;
        align-items: center;

        .icon-s {
          margin-right: 20rpx;
          font-size: 38rpx;
        }
      }
    }

    .option-container {
      margin: 20rpx 40rpx;
      // padding: 0 50rpx;
      background-color: #fff;
      border-radius: 20rpx;

      .option-row {
        // margin: 0 40rpx;
        padding: 0 50rpx;
        height: 85rpx;
        background-color: #fff;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .btn {
          position: absolute;
          height: 70rpx;
          width: 660rpx;
          background-color: transparent;

          &::after {
            border: none;
          }
        }

        .icon {
          display: flex;
          align-items: center;

          .icon-s {
            margin-right: 20rpx;
            font-size: 36rpx;
          }
        }
      }
    }

    .well-known-saying {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #afb2bb;
      margin: 30rpx 0;
    }
  }
}
</style>
